<template>
    <div>
       <public-head :title="title" :hasSearch="hasSearch"></public-head>
       <div class="wrap">
            <van-collapse v-model="activeNames">
                <div class="header">
                  <div>
                      <img src="../../../assets/images/portrait.png" alt="">
                  </div>
                  <div>
                      <div class="names">
                          <div>杨烁 <span>审批中</span></div>
                          <div class="Tdate">提交时间：9:00</div>
                      </div>
                      <p>企发部</p>
                  </div>
                </div>
                <van-collapse-item title="原始工单" name="1">
                    <p><span>工单编号</span><span>XXX-XXX-XX</span></p>
                    <p><span>工单标题</span><span> 15号线六道口站站务员捡拾失物</span></p>
                    <p><span>工单内容</span><span> 15号线六道口站站务员捡拾失物</span></p>
                    <p><span>派单时间</span><span>2020-07-07  11:33:01</span></p>
                </van-collapse-item>
                <van-collapse-item title="营销派单" name="2">
                    <p><span>派单编号</span><span>XXX-XXX-XX</span></p>
                </van-collapse-item>
                <van-collapse-item title="基层回复" name="3">
                    <p><span>工单编号</span><span>XXX-XXX-XX</span></p>
                </van-collapse-item>
                <van-collapse-item title="营销合单" name="4">
                    <p><span>工单编号</span><span>XXX-XXX-XX</span></p>
                </van-collapse-item>
                <van-collapse-item title="基层回复" name="5">
                    <p><span>工单编号</span><span>XXX-XXX-XX</span></p>
                </van-collapse-item>
                <van-collapse-item title="审批流程" name="6">
                    <div class="p_content">
                        <div class="C_nav">
                            <div class="C_nav_left">
                                <img class="P_imgs" src="../../../assets/images/portrait.png" alt="">
                                <h2>审批人姓名</h2><span class="already">已审批</span>
                            </div>
                            <div>2021.07.07</div>
                        </div>
                        <div class="C_info">
                            <p>内容属实给与批准</p>
                            <van-uploader v-model="fileList" multiple />
                        </div>
                    </div>
                    <div class="p_content">
                        <div class="C_nav">
                            <div class="C_nav_left">
                                <img class="P_imgs" src="../../../assets/images/portrait.png" alt="">
                                <h2>审批人姓名</h2><span class="Rejected already">已转审</span>
                            </div>
                            <div>2021.07.07</div>
                        </div>
                        <div class="C_info">
                            <p>内容属实给与批准</p>
                            <van-uploader v-model="fileList" multiple />
                        </div>
                    </div>
                    <div class="p_content">
                        <div class="C_nav">
                            <div class="C_nav_left">
                                <img class="P_imgs" src="../../../assets/images/portrait.png" alt="">
                                <h2>审批人姓名</h2><span class="Rejected already">已驳回</span>
                            </div>
                            <div>2021.07.07</div>
                        </div>
                        <div class="C_info">
                            <p>内容属实给与批准</p>
                            <van-uploader v-model="fileList" multiple />
                        </div>
                    </div>
                    <div class="p_content">
                        <div class="C_nav">
                            <div class="C_nav_left">
                                <img class="P_imgs" src="../../../assets/images/portrait.png" alt="">
                                <h2>审批人姓名</h2><span class="Approved already">已批准</span>
                            </div>
                            <div>2021.07.07</div>
                        </div>
                        <div class="C_info">
                            <p>内容属实给与批准</p>
                            <van-uploader v-model="fileList" multiple />
                        </div>
                    </div>
                </van-collapse-item>
 
            </van-collapse>

            <div class="opinion">
                <h2>审批意见</h2>
                <van-field
                    v-model="message"
                    rows="2"
                    autosize
                    type="textarea"
                    maxlength="30"
                    placeholder="请输入审批意见"
                    show-word-limit
                    />
                <van-uploader v-model="fileList" multiple />
            </div>
        </div>
        <div class="footed">
            <div>
                <img src="../../../../public/images/bill/ok.png" alt="">
                <span>同意</span>
            </div>
            <div>
                <img src="../../../../public/images/bill/reject.png" alt="">
                <span>同意</span>
            </div>
            <div>
                <img src="../../../../public/images/bill/turn.png" alt="">
                <span>同意</span>
            </div>
        </div>
    </div>
</template>
<script>
import PublicHead from "../../../components/PublicHead";
export default {
    name:"",
    components:{
        PublicHead
    },
    data() {
        return {
            title: "督办工单",
            hasSearch: true,
            activeNames: ['1'],
            fileList: [
                { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
                // Uploader 根据文件后缀来判断是否为图片文件
                // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
                // { url: 'https://cloud-image', isImage: true },
            ],
            message:"",
        }
    },
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.wrap{
    width 345px
    border-radius 5px
    // background-color #fff
    margin 10px 15px
    .header{
        background-color #fff
        display flex
        padding 15px 10px 0 10px
        box-sizing border-box
        line-height 20px
        img{
            width 44px
            height 44px
            margin-right 10px
        }
        .names{
            display flex
            width 270px
            justify-content space-between
            font-size 14px
            color #333
            span{
                color #198AFF
                font-size 8px
                padding 3px 2px
                text-align center
                border 0.3px solid #198aff
                border-radius 5px
            }
            .Tdate {
                color #666666
                font-size 12.5px
            }
        }
        p{
            color #666666
            font-size 12.5px
        }
    }
    .van-collapse{
        .van-collapse-item{
            margin-bottom  10px
            p{
                display flex
                justify-content space-between
                line-height 24px
                span:last-child{
                    color #333333
                }
            }
        }
    }
    .p_content{
        border-bottom  1px solid #E6E6E6
        margin-bottom: 16px;
        padding-bottom: 10px;
        box-sizing: border-box
        img{
            width 18px
            height 18px
            display inline-block
            vertical-align middle
        }
        .C_nav{
            display flex
            justify-content space-between
            h2{
                font-size 15px
                color #666666
                margin -0.06rem 4px
            }
            .C_nav_left{
                display flex
                .already{
                    font-size 10px
                    width 40px
                    text-align: center;
                    height: 16px
                    line-height: 16px;
                    margin-top: 2px;
                    border-radius 5px
                    color #1ADFAB
                    border 1px solid #1ADFAB
                }
                .Approved{
                    color #198AFF
                    border 1px solid #198aff
                }
                .Rejected{
                    color #F95425
                    border 1px solid #F95425
                }
            }
        }
        .C_info{
            margin-left 23px
            p{
                margin  6px 0 30px 0
                font-size 13.5px
                color #333
            }
            .van-uploader__upload{
                border: 1px solid #DDDDDD !important    //无效
                border-radius: 10px;
            }
        }
    }
    .opinion{
        background-color #fff
        padding 14px 12px
    }
}
.footed{
    width 100%
    height 50px
    background-color #fff
    display flex
    justify-content space-around
    font-size 14.5px
    line-height 50px
    img{
        margin-right 5px
        vertical-align middle
    }
    span{
        margin-top 2px
        display inline-block
    }
    div:first-child{
        color #1BDFAB
        img{
            width 17.5px
            height 13px
        }
    }
    div:nth-child(2){
        color #FD3F3F
        img{
            width 19px
            height 19px
        }
    }
    div:nth-child(3){
        color #198AFF
        img{
            width 19px
            height 14px
        }
    }
}

</style>